M

MLOG

Bahasa Indonesia

Buka kekuatan micro-frontend dengan Federasi Modul JavaScript di Webpack 5. Pelajari cara membangun aplikasi web yang skalabel, dapat dipelihara, dan independen.

Federasi Modul JavaScript dengan Webpack 5: Panduan Komprehensif untuk Micro-frontend

Dalam lanskap pengembangan web yang terus berkembang, membangun aplikasi yang besar dan kompleks bisa menjadi tugas yang menakutkan. Arsitektur monolitik tradisional sering kali menyebabkan peningkatan waktu pengembangan, hambatan penerapan, dan tantangan dalam menjaga kualitas kode. Micro-frontend telah muncul sebagai pola arsitektur yang kuat untuk mengatasi tantangan ini, memungkinkan tim untuk membangun dan menerapkan bagian-bagian independen dari aplikasi web yang lebih besar. Salah satu teknologi paling menjanjikan untuk mengimplementasikan micro-frontend adalah Federasi Modul JavaScript, yang diperkenalkan di Webpack 5.

Apa itu Micro-frontend?

Micro-frontend adalah gaya arsitektur di mana aplikasi frontend diuraikan menjadi unit-unit yang lebih kecil dan independen, yang dapat dikembangkan, diuji, dan diterapkan secara otonom oleh tim yang berbeda. Setiap micro-frontend bertanggung jawab atas domain bisnis atau fitur tertentu, dan mereka disusun bersama saat runtime untuk membentuk antarmuka pengguna yang lengkap.

Anggap saja seperti sebuah perusahaan: alih-alih memiliki satu tim pengembangan raksasa, Anda memiliki beberapa tim yang lebih kecil yang berfokus pada area tertentu. Setiap tim dapat bekerja secara independen, memungkinkan siklus pengembangan yang lebih cepat dan pemeliharaan yang lebih mudah. Pertimbangkan platform e-commerce besar seperti Amazon; tim yang berbeda mungkin mengelola katalog produk, keranjang belanja, proses checkout, dan manajemen akun pengguna. Ini semua bisa menjadi micro-frontend yang independen.

Manfaat Micro-frontend:

Tantangan Micro-frontend:

Apa itu Federasi Modul JavaScript?

Federasi Modul JavaScript adalah fitur Webpack 5 yang memungkinkan Anda berbagi kode antara aplikasi JavaScript yang dikompilasi secara terpisah saat runtime. Ini memungkinkan Anda untuk mengekspos bagian dari aplikasi Anda sebagai "modul" yang dapat dikonsumsi oleh aplikasi lain, tanpa perlu mempublikasikannya ke repositori pusat seperti npm.

Anggap saja Federasi Modul sebagai cara untuk menciptakan ekosistem aplikasi yang terfederasi, di mana setiap aplikasi dapat menyumbangkan fungsionalitasnya sendiri dan mengonsumsi fungsionalitas dari aplikasi lain. Ini menghilangkan kebutuhan akan dependensi waktu-build dan memungkinkan penerapan yang benar-benar independen.

Sebagai contoh, tim sistem desain dapat mengekspos komponen UI sebagai modul, dan tim aplikasi yang berbeda dapat mengonsumsi komponen ini langsung dari aplikasi sistem desain, tanpa perlu menginstalnya sebagai paket npm. Ketika tim sistem desain memperbarui komponen, perubahan tersebut secara otomatis tercermin di semua aplikasi yang mengonsumsinya.

Konsep Kunci dalam Federasi Modul:

Menyiapkan Federasi Modul dengan Webpack 5: Panduan Praktis

Mari kita ikuti contoh praktis dalam menyiapkan Federasi Modul dengan Webpack 5. Kita akan membuat dua aplikasi sederhana: aplikasi Host dan aplikasi Remote. Aplikasi Remote akan mengekspos sebuah komponen, dan aplikasi Host akan mengonsumsinya.

1. Pengaturan Proyek

Buat dua direktori terpisah untuk aplikasi Anda: `host` dan `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. Konfigurasi Aplikasi Remote

Di direktori `remote`, buat file-file berikut:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Buat `public/index.html` dengan struktur HTML dasar. Yang penting adalah `

`

3. Konfigurasi Aplikasi Host

Di direktori `host`, buat file-file berikut:

  • `src/index.js`: Titik masuk untuk aplikasi.
  • `webpack.config.js`: File konfigurasi Webpack.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

Buat `public/index.html` dengan struktur HTML dasar (mirip dengan aplikasi remote). Yang penting adalah `

`

4. Instal Babel

Di kedua direktori `host` dan `remote`, instal dependensi Babel:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. Jalankan Aplikasi

Di kedua direktori `host` dan `remote`, tambahkan skrip berikut ke `package.json`:

```json "scripts": { "start": "webpack serve" } ```

Sekarang, jalankan kedua aplikasi:

```bash cd remote npm start cd ../host npm start ```

Buka browser Anda dan navigasikan ke `http://localhost:3000`. Anda seharusnya melihat aplikasi Host dengan Komponen Remote dirender di dalamnya.

Penjelasan Opsi Konfigurasi Kunci:

Teknik Lanjutan Federasi Modul

Federasi Modul menawarkan banyak fitur canggih yang dapat membantu Anda membangun arsitektur micro-frontend yang lebih canggih lagi.

Remote Dinamis

Daripada melakukan hardcode URL aplikasi remote dalam konfigurasi Webpack, Anda dapat memuatnya secara dinamis saat runtime. Ini memungkinkan Anda untuk dengan mudah memperbarui lokasi aplikasi remote tanpa harus membangun ulang aplikasi host.

Sebagai contoh, Anda bisa menyimpan URL aplikasi remote dalam file konfigurasi atau database dan memuatnya secara dinamis menggunakan JavaScript.

```javascript // Di webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Asumsikan remoteUrl adalah sesuatu seperti 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // kunci dari federasi modul adalah bahwa aplikasi remote // tersedia menggunakan nama di remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

Sekarang Anda dapat memuat aplikasi host dengan parameter kueri `?remote=http://localhost:3001/remoteEntry.js`

Modul Bersama Berversi

Federasi Modul dapat secara otomatis menangani versi dan deduplikasi modul bersama untuk memastikan bahwa hanya satu versi yang kompatibel dari setiap modul yang dimuat. Ini sangat penting ketika berhadapan dengan aplikasi besar dan kompleks yang memiliki banyak dependensi.

Anda dapat menentukan rentang versi dari setiap modul bersama dalam konfigurasi Webpack.

```javascript // Di webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

Loader Modul Kustom

Federasi Modul memungkinkan Anda untuk mendefinisikan loader modul kustom yang dapat digunakan untuk memuat modul dari sumber yang berbeda atau dalam format yang berbeda. Ini bisa berguna untuk memuat modul dari CDN atau dari registri modul kustom.

Berbagi State antara Micro-frontend

Salah satu tantangan dari arsitektur micro-frontend adalah berbagi state antara micro-frontend yang berbeda. Ada beberapa pendekatan yang dapat Anda ambil untuk mengatasi tantangan ini:

Praktik Terbaik untuk Menerapkan Micro-frontend dengan Federasi Modul

Berikut adalah beberapa praktik terbaik yang perlu diingat saat menerapkan micro-frontend dengan Federasi Modul:

Contoh Dunia Nyata dari Federasi Modul dalam Aksi

Meskipun studi kasus spesifik seringkali bersifat rahasia, berikut adalah beberapa skenario umum di mana Federasi Modul bisa sangat berguna:

Kesimpulan

Federasi Modul JavaScript di Webpack 5 menyediakan cara yang kuat dan fleksibel untuk membangun arsitektur micro-frontend. Ini memungkinkan Anda untuk berbagi kode antara aplikasi JavaScript yang dikompilasi secara terpisah saat runtime, memungkinkan penerapan independen, keragaman teknologi, dan peningkatan otonomi tim. Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini, Anda dapat memanfaatkan Federasi Modul untuk membangun aplikasi web yang skalabel, dapat dipelihara, dan inovatif.

Masa depan pengembangan frontend tidak diragukan lagi mengarah pada arsitektur modular dan terdistribusi. Federasi Modul menyediakan alat penting untuk membangun sistem modern ini, memungkinkan tim untuk membuat aplikasi kompleks dengan kecepatan, fleksibilitas, dan ketahanan yang lebih besar. Seiring dengan matangnya teknologi, kita dapat berharap untuk melihat lebih banyak lagi kasus penggunaan inovatif dan praktik terbaik yang muncul.